<!--
 * @Description  : 搜索框：
                    label:搜索框名称
                    type:搜索框类型 
                        input:输入框, inputPicker:范围输入, select:选择框, datePicker:日期范围, button:按钮, 
                    prop:参数名
                    placeholder:搜索框占位符
                    options:搜索框数据   
 * @Author       : zhao
 * @Date         : 2022-06-28 11:16:18
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-02 13:54:07
-->



<template>
    <div class="search_tab" v-if="searchType">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item :label="i.label" v-for="(i, index) in searchType" :key="index">
                <!-- input -->
                <el-input v-if="i.type === 'input'" clearable v-model="formInline[i.prop]" :placeholder="i.placeholder"> </el-input>
                <!-- input+input -->
                <div v-if="i.type === 'inputPicker'" class="inputPicker">
                    <el-input v-model="formInline[i.prop]" clearable :placeholder="i.placeholder"></el-input> -
                    <el-input v-model="formInline[i.prop2]" clearable :placeholder="i.placeholder2"></el-input>
                </div>
                <!-- 选择框 -->
                <el-select clearable v-if="i.type === 'select'" v-model="formInline[i.prop]" :placeholder="i.placeholder">
                    <el-option v-for="item in i.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- 日期范围 -->
                <el-date-picker
                    v-if="i.type === 'datePicker'"
                    v-model="formInline[i.prop]"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
                <!-- 按钮 -->
                <template v-if="i.type === 'button'">
                    <el-button :type="s.type || 'primary'" :plain="s.plain" @click="onSubmit(s.name)" v-for="s in i.options" :key="s.name"
                        >{{ s.name }}
                    </el-button>
                </template>
            </el-form-item>

            <el-form-item> </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            formInline: {},
            searchHide: false,
        }
    },
    props: {
        searchType: Array,
    },
    components: {},
    watch: {
        searchType() {
            this.searchHide = true
        },
    },
    computed: {},

    mounted() {},

    methods: {
        async onSubmit(name) {
            const router = this.$route.name
            if (name == "查询") {
                // this.formInline.pageIndex || (this.formInline.pageIndex = 1)
                // this.formInline.pageSize || (this.formInline.pageSize = 10)
                this.formInline.pageSize = this.$store.state.table.searchData.pageSize || 10
                this.formInline.pageIndex = this.$store.state.table.searchData.pageIndex || 1

                const date = this.searchType.filter((e) => e.prop == "TimeDate")
                delete this.formInline[date[0].value1]
                delete this.formInline[date[0].value2]
                if (this.formInline.TimeDate) {
                    this.formInline[date[0].value1] = this.formInline.TimeDate[0]
                    this.formInline[date[0].value2] = this.formInline.TimeDate[1]
                    delete this.formInline.TimeDate
                } else {
                    delete this.formInline.TimeDate
                }

                this.formInline.state || delete this.formInline.state

                this.$store.state.table.searchData = { ...this.formInline }

                this.$store.dispatch("table/getTableData")
            }
            if (name == "清空浏览记录") {
                const { code } = await this.$store.dispatch("searchRecord/deleteBrowsingRecordAll")
                if (code == 200) this.RefreshTable()
            }
            if (name == "删除" && router == "BrowseRecord") {
                const selectData = this.$store.state.table.selectData
                let arr = selectData.map((e) => {
                    return e.id
                })

                const { code } = await this.$store.dispatch("searchRecord/deleteBrowsingRecord", arr)
                if (code == 200) this.RefreshTable()
            }
        },
        //刷新相应tabe
        async RefreshTable() {
            const { data, count } = await this.$store.dispatch(this.$store.state.table.url, this.$store.state.table.searchData)
            this.$store.state.table.PaginationData.total = count
            this.$store.state.table.tableData = data || []
        },
    },
}
</script>
<style lang='scss' scoped>
.inputPicker {
    .el-input {
        width: 45%;
    }
}
</style>